<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr />
    <div @click="clickHandler">message: {{ message }}</div>
    <hr />
    <div>obj.name: {{ obj.name }}</div>
    <div>obj.age: {{ obj.age }}</div>
    <div>obj.attrs.weight: {{ obj.attrs.weight }}</div>
    <div @click="changeBasketball">
      obj.attrs.hobby.basketball.score: {{ obj.attrs.hobby.basketball.score }}
    </div>
    <div>
      obj.attrs.hobby.football.score: {{ obj.attrs.hobby.football.score }}
    </div>
  </div>
</template>

<script>
import { ref, watch } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const message = ref("我爱你高圆圆");
    watch(
      () => message.value,
      (nval, oval) => {
        console.log(222, nval);
      }
    );
    const clickHandler = () => {
      message.value += "呵";
    };

    // 真实应用场景
    const obj = ref({
      name: "张三",
      age: 18,
      attrs: {
        weight: 160,
        hobby: {
          // 篮球
          basketball: {
            score: 90, // 分值,满分100代表喜爱的程度 --- 就想要监听这个数据
          },
          football: {
            score: 80,
          },
        },
      },
    });

    watch(
      obj,
      (nval, oval) => {
        console.log("watch -> ", nval);
      },
      { deep: true }
    );

    watch(
      () => obj.value.attrs.hobby.basketball.score,
      (nval, oval) => {
        console.log("watch 参数一函数", nval);
      }
    );

    const changeBasketball = () => {
      obj.value.attrs.hobby.basketball.score = 85;
    };

    return {
      message,
      clickHandler,
      obj,
      changeBasketball,
    };
  },
};
</script>

<style scoped>
</style>
